<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	 <meta name="viewport" content="width=device-width">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
	
	<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div id="main">
		<!-- 搜索框 -->
		<header class="box-flex box-flex-x box-flex-y">
			<form action="" class="box-flex">
				<input type="text" placeholder="请输入要查询的商品">
				<a href="">取消</a>
			</form>
			<div id="inputshow"><span>  </span>请输入要查询的商品</div>
		</header>
		<script>
			var oinps = document.getElementById('inputshow');
			var iHeader = document.getElementsByTagName('header')[0];
			var iA = iHeader.getElementsByTagName('a')[0];
			iA.addEventListener('click',function(){
				addClass(oinps,'')
			});
			oinps.addEventListener('click',function(){
				addClass(oinps,'box-hidden')
			});
			function addClass(obj,clss){
				obj.className = clss;
			}
		</script>
		<!-- 幻灯片 -->
		<figure id="slide">
			<ul>
				<li><img src="images/ban1.jpg"></li>
				<li><img src="images/ban2.jpg"></li>
				<li><img src="images/ban1.jpg"></li>
				<li><img src="images/ban3.jpg"></li>
				<li><img src="images/ban4.jpg"></li>
			</ul>
			<div id="smark">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</figure>


		<!-- //小图标 -->
		<div id="Tico" class="box-flex box-flex-b">
			<a href=""><img src="images/icon-link1.png" alt="">精品推荐</a>
			<a href=""><img src="images/icon-link2.png" alt="">精品推荐</a>
			<a href=""><img src="images/icon-link3.png" alt="">精品推荐</a>
			<a href=""><img src="images/icon-link4.png" alt="">精品推荐</a>
		</div>
		<!-- 小喇叭 -->
		<div id="Inew" class="box-flex box-flex-b"><i></i><div id="newCon"></div><a href="" class="ae"></a></div>
		<!-- 精品推荐 -->
		<div id="jingpin">
			<div id="jp-title"><span> 精品推荐</span> <i></i><i>/</i><i></i></div>
			<ul>
				<li><img src="images/jingxuan1.jpg"></li>
				<li><img src="images/jingxuan2.jpg"></li>
				<li><img src="images/jingxuan3.jpg"></li>
				<li><img src="images/jingxuan1.jpg"></li>
				<li><img src="images/jingxuan2.jpg"></li>
				<li><img src="images/jingxuan3.jpg"></li>
			</ul>
		</div><div style="clear:both"></div>
		<!-- 猜你喜欢 -->
		<div id="like">
		<p><span><span></span>猜你喜欢<span></span></span></span></p>
			<div>
				<a href="#">
					<img src="images/pro1.jpg" alt="">
					<p>洋河蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					<span>￥25.0</span>
				</a>
			</div>
			<div>
				<a href="#">
					<img src="images/pro2.jpg" alt="">
					<p>洋河蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					<span>￥25.0</span>
				</a>
			</div>
			<div>
				<a href="#">
					<img src="images/pro3.jpg" alt="">
					<p>洋河蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					<span>￥25.0</span>
				</a>
			</div>
			<div>
				<a href="#">
					<img src="images/pro4.jpg" alt="">
					<p>洋河蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					<span>￥25.0</span>
				</a>
			</div>
			<a href="#" id="more">查看更多>></a>
		</div>
		
	</div>
	
		<nav id="nav" class="box-flex box-flex-b">
			<a href="#">
				<div></div>
				<p>首页</p>
			</a>
			<a href="#">
				<div></div>
				<p>分类</p>
			</a>
			<a href="#">
				<div></div>
				<p>购物车</p>
			</a>
			<a href="#">
				<div></div>
				<p>我的</p>
			</a>
			
			
		</nav>

	
</body>
		<script>
		window.onload = function(){
			slide();
			Inew();
			jptj();
			console.log(navigator);
		}
		function jptj(){
			var ojp = document.getElementById('jingpin');
			var oul = ojp.getElementsByTagName('ul')[0];
			var oli = oul.getElementsByTagName('li');
			var oi = ojp.getElementsByTagName('i');
			
			for(var j = 0; j<oli.length; j++){
				oli[j].style.width = oul.offsetWidth/6 + "px";
			}
			var x = 0;
			var sx = 0;
			var i = 0;
			var bc = oli[0].offsetWidth;
			oul.innerHTML += oul.innerHTML;
			oul.style.width = oul.offsetWidth * 2 +'px';
			pagei();
			oul.addEventListener('touchstart',fnStart,false);
			oul.addEventListener('touchmove',fnMove,false);
			oul.addEventListener('touchend',fnEnd,false);

			function fnStart(ev){
				oul.style.transition = 'none';
				spage = ev.changedTouches[0].pageX;
				sx = x;
			}

			function fnMove(ev){
				var mpage = ev.changedTouches[0].pageX;
				x = sx + mpage - spage;
				if(-x>=oul.offsetWidth/2){
					x=mpage - spage;
				}
				if(-x < 0){
					x=-oul.offsetWidth/2 + mpage - spage
				}
				oul.style.WebkitTransform = transform = 'translateX('+x+'px)';
			}

			function fnEnd(){
				i = x / bc;
				i = -Math.round(i);
				if(i < 0){
					i = 0;
				}
				if(i >= oli.length/2){
					i = parseInt(oli.length/2);
				}
				Tab(oul);

			}
			function pagei(){
				oi[0].innerHTML = oli.length/2;
				oi[1].innerHTML = (i+1) + '/';
			}

			function Tab(obj){
				i = i%oli.length;
				obj.style.transition = '0.2s all';
				x = -i*bc;
				
				obj.style.WebkitTransform = "translateX("+x+"px)";
				pagei();

			}
		}


		function Inew(){
			var Ine = document.getElementById("Inew");
			
			var newCon = document.getElementById("newCon");
			var na = newCon.getElementsByTagName("a");
			var data = ['热烈庆祝本店开张！','热烈庆祝二周年','热烈庆祝本店三周年水水水水水水水水水水水水水水水水水水水！','1111111111111111111111111','22222222222222222222222222','3333333333300','444444444444444444444'];
			var t = Ine.offsetHeight;
			for(var i = 0;i < data.length; i++){
				var oa = document.createElement('a');
				oa.style.height = t;
				oa.innerHTML = data[i];
				newCon.appendChild(oa);
			}
			for(var j = 0;j < na.length;j++){
				na[j].index = j;
			}
			
			newCon.innerHTML += newCon.innerHTML;
			console.log(newCon.offsetHeight);
			setInterval(function(){
				if(-newCon.offsetTop >= newCon.offsetHeight/2){
					console.log(-newCon.offsetTop+','+newCon.offsetHeight/2);
					newCon.style.transition = 'none';
					newCon.style.top = '0px';
				}else{
					fnNews();
				}
				
			},2000);
			function fnNews(){
				newCon.style.transition = '0.5s all';
				newCon.style.top = newCon.offsetTop - t + 'px';
			}

		}
		function slide(){


			var oSlide = document.getElementById('slide');
			var oul = oSlide.getElementsByTagName('ul')[0];
			var oli = oul.getElementsByTagName('li');
			var Tspan = oSlide.getElementsByTagName('span');
			var bc = oli[0].offsetWidth;
			var x = 0;
			var i = 0;
			var sx = 0;
			var mytime = null;
			var spage = 0;
			var lil = oli.length;

			console.log(oul.offsetWidth)
			for(var j = 0; j<oli.length; j++){
				oli[j].style.width = oul.offsetWidth/lil + "px";
			}
			oul.innerHTML += oul.innerHTML;
			oul.style.width = oul.offsetWidth * 2 +'px';
			console.log(oul.offsetWidth)

			auto();
			function auto(){
				mytime = setInterval(function(){
					Tab(oul);
					i++;
				},2000);
			}
			

			oSlide.addEventListener('touchstart',fnStart,false);
			oSlide.addEventListener('touchmove',fnMove,false);
			oSlide.addEventListener('touchend',fnEnd,false);

			function fnStart(ev){
				clearInterval(mytime);
				oul.style.transition = 'none';
				spage = ev.changedTouches[0].pageX;
				sx = x;
			}

			function fnMove(ev){
				var mpage = ev.changedTouches[0].pageX;
				x = sx + mpage - spage;
				if(-x>=oul.offsetWidth/2){
					x=mpage - spage;
				}
				if(-x < 0){
					x=-oul.offsetWidth/2 + mpage - spage
				}
				oul.style.WebkitTransform = transform = 'translateX('+x+'px)';
			}

			function fnEnd(ev){
				var epage = ev.changedTouches[0].pageX;
				i = x / bc;
				i = -Math.round(i);
				if(epage - spage < -oSlide.offsetWidth/5){
					i = i + 1;
				}
				if(epage - spage > oSlide.offsetWidth/5){
					i = i - 1;
				}
				console.log(epage - spage)
				if(i < 0){
					i = 0;
				}
				if(i >= oli.length-1){
					i = oli.length-1;
				}
				Tab(oul);
				auto();

			}
			function fnMark(){
				i = this.index;
				Tab(oul);
			}
			function fnSpan(o){
				for(var j=0;j<Tspan.length;j++){
					Tspan[j].index = j;
					Tspan[j].className = '';
					Tspan[j].addEventListener('touchend',fnMark,false);
					if(o == j){
						Tspan[j].className = 'active';
					}
				}
			}
			function Tab(obj){
				i = i%oli.length;
				obj.style.transition = '0.2s all';
				x = -i*bc;
				
				obj.style.WebkitTransform = "translateX("+x+"px)";
				fnSpan(i%(oli.length/2));
			}
			 
		}
		</script>
</html>